<div id="hyper-subpage" class="container-fluid" style="float:left;">
	<h3 class="page-header"><svg data-src="svg/remote_control.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="main_menu_remotecontrol_token">Remote Control</span></h3>
	<div class="row">
		<div class="col-12 col-xl-7">
			<div class="card card-default">
				<div class="card-header"><svg data-src="svg/remote_control_sources.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="remote_input_label">Source selection</span></div>
				<div class="card-body">
					<div id="sstcont"></div>
					<div id="auto_btn"></div>
				</div>
			</div>
		</div>

		<div class="col-12 col-md-6 col-xl-5">
			<div class="card card-default">
				<div class="card-header"><svg data-src="svg/components.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="remote_components_label">Components control</span></div>
				<div class="card-body" id="comp_intro">
					<div id="componentsbutton"></div>
				</div>
			</div>
		</div>

		<div class="col-md-6 col-lg-6 col-xl-4">
			<div class="card card-default">
				<div class="card-header"><svg data-src="svg/remote_control.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="remote_color_label">Colors/Effects</span></div>
				<div class="card-body" id="color_intro">					
					<div>						
						<div class="row">
							<div class="col-3 col-form-label mb-3">
								<label for="remote_color_target" data-i18n="remote_color_label_color"></label>
							</div>
							<div class="col-9">							    
								<div class="input-group">																		
									<i id="remote_color"></i>
									<input id="remote_color_target" type="text" class="form-control" value="" />
									<div class="input-group-append">
										<span id="remote_color_target_invoker" class="input-group-text">&nbsp;</span>									
									</div>
									<div class="input-group-append">
										<span class="input-group-text" id="remote_input_rescol" title="Repeat Color" style="cursor: pointer; height: 100%;"><svg data-src="svg/button_reload.svg" fill="currentColor" class="svg4hyperhdr ms-1 top-0"></svg></span>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-3 col-form-label mb-3">
								<label for="effect_select" data-i18n="remote_effects_label_effects">Effect:</label>
							</div>
							<div class="col-9">
								<div class="input-group">
									<select id="effect_select" class="form-select"></select>
									<div class="input-group-append">
										<span class="input-group-text" id="remote_input_reseff" title="Repeat Effect" style="cursor: pointer; height: 100%;"><svg data-src="svg/button_reload.svg" fill="currentColor" class="svg4hyperhdr ms-1 top-0"></svg></span>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-3 col-form-label mb-3">
								<label for="remote_input_img" data-i18n="remote_effects_label_picture">Picture:</label>
							</div>
							<div class="col-9">
								<div class="input-group">
									<input class="form-control" id="remote_input_img" type="file" accept="image/*" />
									<div class="input-group-append">
										<span class="input-group-text" id="remote_input_repimg" title="Repeat Image" style="cursor: pointer; height: 100%;"><svg data-src="svg/button_reload.svg" fill="currentColor" class="svg4hyperhdr ms-1 top-0"></svg></i></span>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-3 col-form-label mb-3">
								<label for="remote_duration" data-i18n="remote_input_duration"></label>
							</div>
							<div class="col-9">
								<div class="input-group">
									<input id="remote_duration" type="number" class="form-control" value="0" min="0" step="5" />
									<div class="input-group-append">
										<span class="input-group-text" data-i18n="edt_append_s"></span>
									</div>
									<div class="input-group-append">
										<button id="effect-stepper-down" type="button" class="btn btn-secondary stepper-down">-</button>
									</div>
									<div class="input-group-append">
										<button id="effect-stepper-up" type="button" class="btn btn-secondary stepper-up">+</button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<button data-i18n="remote_color_button_reset" type="button" class="btn btn-primary" id="reset_color" style="margin-top: 10px;">Reset Color/Effect</button>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-6 col-xl-4">
			<div class="card card-default">
				<div class="card-header"><svg data-src="svg/remote_control_mapping.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="remote_maptype_label">Mapping types</span></div>
				<div class="card-body" id="maptype_intro">
					<div id="mappingsbutton" class="container"></div>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-6 col-xl-4">
			<div class="card card-default">
				<div class="card-header not-instance"><svg data-src="svg/hdr.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="remote_videoModeHdr_label"></span></div>
				<div class="card-body" id="videomodehdr_intro">
					<div id="videomodehdrbtns" class="container"></div>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-6 col-xl-5">
			<div class="card card-default">
				<div class="card-header"><svg data-src="svg/image_processing_color_calibration.svg" fill="currentColor" class="svg4hyperhdr"></svg><span data-i18n="remote_live_calibration">Live calibration</span></div>
				<div class="card-body" id="conf_cont">
				</div>
			</div>			
		</div>
	</div>
</div>
<script>
$.getScript("/js/remote.js");
</script>
